<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18001010803 王凯</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./download55zf/font_2249885_v6trtuzazmi/iconfont.css">
    <style>
        button{
            border:1px solid white;
            border-radius: 10px;
        }
        body{
            padding: 0;
            margin: 0;
        }
        .ssk{
            border: 1px solid rgb(206, 202, 202);
            position: absolute;
            top: 5px;
            right:.5px;
            border-radius: 10px;
            width: 70%;
            margin-right: 20px;
        }
        .ssk .icon{
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            padding-left: 10px;
            padding-top: 5px;
        }
        .aa{
            font-size: 1rem;
            position: absolute;
            margin: 0;
            top: 0;
            color: gainsboro;
        }
        #a{
            position: relative;

        }
        #a input{
            font-size: .8rem;
            padding: 0;
            border: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        #a h2{
            width: 20%;
            font-size: 1rem;
            margin: 0;
            margin-top: 5px;
            padding-top: 4px;
        }
        #a span{
            font-size: 1.5rem;
            color: rgb(211, 200, 200);
        }
        #a img{
            /* height: 10vh; */
            position: absolute;
            width: 80%;
            top:5px;
            right: 0;
        }
        .b{
            width: 100%;
        }
        ul{
            padding: 0;
            display: flex;
            list-style: none;
        }
        li{
            flex-grow: 1;
            text-align: center;
        }
        a{
            text-decoration: none;/*链接 去下划线*/
        }

        #slide img{
            width:100%;
            height: 50vw;

        }
        .c h2{
            margin: 0;
        }
        .icon {
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .d span{
            color: rgb(177, 168, 168);
        }
        .d li{
            margin: 5px;
            width: 10%;
            text-align: center;
            border-radius: 10px;
            background-color:burlywood;
        }
        .e{
            position:relative;
        }
        .ea{
            position: absolute;
            top: 5px;
            right: 3px;
            
            font-size: 18px;
            color: silver;
        }
        .eb{
            position: absolute;
            top: 5px;
            right: 3px;
            font-size: 18px;
            color: silver;
        }
        .swiper-slide img{
            width: 100%;
        }
        p{
            margin-top: 0;
            margin-left: 7px;
            margin-bottom: 0;
        }
        #dnav img{
            margin-left: 5px;
        } 
        button{
            background-color: red;
            color: #fff;
            margin-left: 10px;
            margin-top: 3px;
        }
        .ey{
            background-color:blue;
            color: #fff;
        }
        .ex{
            background-color:orange;
            color: #fff;
        }
        .eh{
            font-size: 3px;
            color: gray;
            padding: 5px;
        }
/***************************************/
        .vlist{
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
        }
        .img img{
            width: 100%;
        }
        .vlist>li{
            width: 35%;
            flex-grow: 1;
            margin-bottom: 12px;
            margin: 3px;
        }
        .vlist h4{
            margin: 0;
            font-style: 14px;
            line-height: 20px;
        }
        .vlist p{
            font-style: 14px;
            line-height: 18px;
        }
        #hide{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 10px;
            z-index: 999;/*重点*/
            background-color:#fff;
        }
        #hide ul{
            list-style: none;
            display: flex;
            width: 100%;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        #hide li{/* 上面有个总li */
            padding-top: 5px;
        }
        #hide span{
            color: rgb(192, 181, 181);
        }
        #hide a{
            color: rgb(192, 181, 181);
        }
        .zx{
            padding: 0;
            margin-top: 3px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <!-- a -->
    <script src="./download55zf/font_2249885_v6trtuzazmi/iconfont.js"></script>
    <div id="a">
        <h2><a href="dxm6.html">&nbsp大连<span>▼</span></a></h2>
        <div class="ssk">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-search"></use>
              </svg>
            <input type="text" class="input" placeholder="《冷血狂宴》全网首播">
        </div>
    </div>

    <!-- b -->
    <div class="b">
        <ul>
            <li><a href="#">特惠</a></li>
            <li><a href="#">推荐</a></li>
            <li><a href="#">预告片</a></li>
            <li><a href="#">新片</a></li>
        </ul>
    </div>
    
    <div class="swiper-container" id="slide">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./tp/IMG_20201205_140156.jpg"></div>
          <div class="swiper-slide"><img src="./tp/IMG_20201205_140215.jpg"></div>
          <div class="swiper-slide"><img src="./tp/IMG_20201205_140239.jpg"></div>
          <div class="swiper-slide"><img src="./tp/IMG_20201205_140302.jpg"></div>
          </div>
    </div>
    <script src="./swiper-bundle.min.js"></script>
    <div class="swiper-pagination"></div>
    <div class="swiper-pagination"></div>
    </div>
    <script>
    var slide = new Swiper('#slide', {
      pagination: {
        el: '.swiper-pagination',
      },
            autoplay: {
            delay: 1500,
            disableOnInteraction: true,
        }
        });
    </script>
    <!-- c -->
    <script src="./download55zf/font_2249885_v6trtuzazmi/iconfont.js"></script>
    <div class="c">
        <ul>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dianying"></use></svg>
                </a>
                <p>电影影院</p>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fangyingtingshebei"></use></svg>
                </a>
                <p>放映厅</p>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinle"></use></svg>
                </a>
                <p>演出赛事</p>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zongyi"></use></svg>
                </a>
                <p>剧集综艺</p>
            </li>
        </ul>
    </div>
    <!-- d -->
    <div class="d">
        <ul>
            <li><a href="#">砍价专区<br><span>0元观影</span></a></li>
            <li><a href="#">50元红包<br><span>人人有份</span></a></li>
            <li><a href="#">答题有礼<br><span>最高50</span></a></li>
            <li><a href="#">猫眼电影<br><span>电影周边</span></a></li>
        </ul>
    </div>
    <!-- e -->
    <div class="e">
        <h2>正在热映</h2>
        <span class="ea">全部41部&nbsp></span>
    </div>
    <div class="swiper-container" id="dnav">
        <div class="swiper-wrapper" >
        <div class="swiper-slide">
            <img src="./tp/e1.jpg">
            <p>疯狂原始人</p>
            <button>购票</button>
        </div>
          <div class="swiper-slide">
                <img src="./tp/e2.jpg">
                <p>赤狐书生</p>
                <button>购票</button>
            </div>

          <div class="swiper-slide">
                <img src="./tp/e3.jpg">
                <p>一秒钟</p>
                <button>购票</button>
            </div>
          <div class="swiper-slide">
                <img src="./tp/e4.jpg">
                <p>如果声音不记得</p>
                <button>购票</button>
            </div>

        </div>
    </div>
    <script>
        var dnav = new Swiper('#dnav', {
        slidesPerView: 3,//图片数量
        spaceBetween: 10
    });
    </script>
        <div class="e">
            <h2>即将上映</h2>
            <span class="eb">全部53部&nbsp></span>
        </div>
        <div class="swiper-container" id="dnav">
            <div class="swiper-wrapper" >
            <div class="swiper-slide">
                <img src="./tp/ea.jpg">
                <p>少女嘉禾</p>
                <p class="eh">12月15日</p>
                <button class="ey">预售</button>
            </div>
              <div class="swiper-slide">
                    <img src="./tp/eb.jpg">
                    <p>猎杀T34</p>
                    <p class="eh">12月19日</p>
                    <button class="ex">想看</button>
                </div>
    
              <div class="swiper-slide">
                    <img src="./tp/ec.jpg">
                    <p>城市猎人</p>
                    <p class="eh">12月25日</p>
                    <button class="ey">预售</button>
                </div>
              <div class="swiper-slide">
                    <img src="./tp/ed.jpg">
                    <p>沐浴之王</p>
                    <p class="eh">12月31日</p>
                    <button class="ex">想看</button>
                </div>
    
            </div>
        </div>
        <script>
            var dnav = new Swiper('#dnav', {
            slidesPerView: 3,//图片数量
            spaceBetween: 10
        });
        </script>
        <!-- f -->
        <ul class="vlist"></ul>
        <script>
            var data=[
                {
                    img:"./tp/f1.jpg",
                    title:"妈妈喊你回家吃饭啦!",
                    content:"电影推荐&nbsp&nbsp&nbsp",
                    zan:"👍37"
                },
                {
                    img:"./tp/f2.jpg",
                    title:"假如动物也会惊声尖叫",
                    content:"不正经制片人&nbsp&nbsp&nbsp",
                    zan:"👍88"
                },
                {
                    img:"./tp/f3.jpg",
                    title:"老板，有危险你先走",
                    content:"电影推荐&nbsp&nbsp&nbsp",
                    zan:"👍23"
                },
                {
                    img:"./tp/f4.jpg",
                    title:"《赤狐书生》上映",
                    content:"YoA3432&nbsp&nbsp&nbsp",
                    zan:"👍126"
                },
                {
                    img:"./tp/f5.jpg",
                    title:"贺开朗《三替公司》又有进步",
                    content:"日韩影视馆&nbsp&nbsp&nbsp",
                    zan:"👍313"
                }
            ];
            var vlist=document.querySelector(".vlist");
            data.forEach((v,i)=>{
                let li=document.createElement("li");
                li.innerHTML=`<div class="img">
                    <img src="${v.img}">
                </div>
                <h4>${v.title}</h4>
                <p>${v.content}</p>
                <a href="" class="fz">${v.zan}</a>`;
                vlist.appendChild(li);//添加到网页显示
            })            
        </script>
        <h2> &nbsp</h2>
        <!-- G -->
        <div id="hide">
            <ul>
                <li>
                    <span class="iconfont icon-mao" style="color:rgb(238, 132, 113);"></span>
                    <p class="zx"><a href="index.html" style="color:rgb(238, 132, 113);">首页</a></p>
                </li>
                <li>
                    <span class="iconfont icon-dianying1"></span>
                    <p class="zx"><a href="dxm2.html">电影/影院</a></p>
                </li>
                <li>
                    <span class="iconfont icon-xiaoshipin"></span>
                    <p class="zx"><a class="hs" href="dxm3.html">小视频</a></p>
                </li>
                <li>
                    <span class="iconfont icon-yanchu"></span>
                    <p class="zx"><a href="dxm4.html">演出</a></p>
                </li>
                <li>
                    <span class="iconfont icon-wode"></span>
                    <p class="zx"><a href="dxm5.html">我的</a></p>
                </li>
            </ul>
        </div>
</body>
</html>